<template>
  <view class="myRecommendation-box">
    <view class="myRecommendation-top-box u-flex u-row-between">
      <view
        class="u-flex item-name-style"
        :style="{ fontSize: titleName < 11 ? '30rpx' : '24rpx' }"
      >
        <view> 订单号：{{ myRecommendation.dispatchCode }} </view>
      </view>
    </view>
    <view class="content">
      <view
        class="myRecommendation-center-box"
        @click="routeJumpBtn(myRecommendation)"
      >
        <view class="itemName-box-base">
          <view class="itemName-box">
            <view>货物名称：</view>
            <view> {{ myRecommendation.cargoName }} </view>
          </view>
          <template v-if="dataSourcesType == 0">
            <image
              class="order-icon"
              :src="
                orderStatusList.filter(
                  (item) => item.type == myRecommendation.dispatchStatus
                )[0].icon
              "
            />
          </template>

          <template v-else>
            <image
              class="order-icon"
              :src="
                orderNodeStatusList.filter(
                  (item) => item.type == myRecommendation.nodeStatus
                )[0].icon
              "
            />
          </template>
        </view>
        <view class="startingPoint-big-box">
          <view>
            <view class="province-box">
              <view>{{ myRecommendation.loadPlaceSplit.city }}</view>
            </view>
            <view class="city-box">
              <view>{{ myRecommendation.loadPlaceSplit.county }}</view>
            </view>
          </view>
          <image class="address-icon" :src="`${imgUrl}address-arrow.png`" />
          <view>
            <view class="province-box">
              <view>{{ myRecommendation.targetPlaceSplit.city }}</view>
            </view>
            <view class="city-box">
              <view>{{ myRecommendation.targetPlaceSplit.county }}</view>
            </view>
          </view>
        </view>
        <view class="weight-box">
          <!-- 订单 -->
          <view class="weight-left">
            <view class="u-flex">
              <view class="weight-box-lable"> 公司名称：</view>
              <view class="weight-box-content">
                {{ myRecommendation.corpName }}
              </view>
            </view>
            <view class="u-flex">
              <view class="weight-box-lable">
                <view class="weight-box-lable"> 货主姓名：</view>
              </view>
              <view class="weight-box-content">
                {{ myRecommendation.shipperName }}
              </view>
            </view>
            <view class="u-flex">
              <view class="weight-box-lable"> 信用评分：</view>
              <view class="text-colore02020">
                {{ myRecommendation.shipperEvaluate }}
              </view>
              分
            </view>
            <view class="u-flex">
              <view class="weight-box-lable"> 联系电话：</view>
              <view
                @click.stop="
                  handleClickcustomerService(myRecommendation.shipperPhone)
                "
                class="text-color3399ff"
              >
                {{ myRecommendation.shipperPhone }}
              </view>
            </view>
          </view>
          <view class="weight-right">
            <view class="u-flex">
              <view class="weight-box-lable">运费总价：</view>
              <view>
                {{
                  myRecommendation.freightTotalPrice &&
                  myRecommendation.freightTotalPrice + '元'
                }}
              </view>
            </view>

            <view class="u-flex">
              <view class="weight-box-lable">运费单价：</view>
              <view>
                {{
                  myRecommendation.freightUnitPrice &&
                  myRecommendation.freightUnitPrice + '元/吨'
                }}
              </view>
            </view>

            <view class="u-flex">
              <view class="weight-box-lable"> 货物总重：</view>
              {{
                myRecommendation.planWeight &&
                myRecommendation.planWeight + '吨'
              }}
            </view>

            <view class="u-flex">
              <view class="weight-box-lable"> 路损：</view>
              {{
                myRecommendation.roadLossValue &&
                myRecommendation.roadLossValue + '‰'
              }}
            </view>
          </view>
        </view>
      </view>
      <view class="myRecommendation-bottom-box">
        <view class="myRecommendation-bottom-time-box">
          <view
            class="u-flex"
            v-if="
              myRecommendation.nodeStatus == '2' ||
              myRecommendation.nodeStatus == '4'
            "
          >
            <view class="weight-box-lable">抢单时间:</view>
            {{ myRecommendation.createAt }}
          </view>
          <view class="u-flex" v-if="myRecommendation.nodeStatus == '6'">
            <view class="weight-box-lable">装货时间:</view>
            {{ myRecommendation.loadAt }}
          </view>
          <view
            class="u-flex"
            v-if="
              myRecommendation.nodeStatus == '7' ||
              myRecommendation.dispatchStatus == '3'
            "
          >
            <view class="weight-box-lable">到货时间:</view>
            {{ myRecommendation.arriveAt }}
          </view>
          <view class="u-flex" v-if="myRecommendation.dispatchStatus == '4'">
            <view class="weight-box-lable">结算时间：</view>
            {{ myRecommendation.settleAt }}
          </view>
        </view>
        <view class="myRecommendation-bottom-btns">
          <!-- <u-button
            v-if="
              myRecommendation.dispatchStatus == '1' &&
              myRecommendation.nodeStatus == '2'
            "
            :plain="true"
            :custom-style="btnCalss2"
            :throttle-time="0"
            @click="handleDispatchCancelSend(myRecommendation)"
          >
            取消接单
          </u-button>
          <u-button
            v-if="
              myRecommendation.dispatchStatus == '1' &&
              myRecommendation.nodeStatus == '2'
            "
            :plain="true"
            :custom-style="btnCalss2"
            :throttle-time="0"
            @click="handleDispatchSend(myRecommendation)"
          >
            确定接单
          </u-button> -->
          <u-button
            v-if="
              myRecommendation.dispatchStatus == '2' &&
              myRecommendation.nodeStatus == '4'
            "
            :plain="true"
            :custom-style="btnCalss2"
            :throttle-time="0"
            @click="handleDispatchLoad(myRecommendation)"
          >
            确认装货
          </u-button>
          <u-button
            v-if="
              myRecommendation.dispatchStatus == '2' &&
              myRecommendation.nodeStatus == '6' &&
              myRecommendation.planType == '2'
            "
            :plain="true"
            :custom-style="btnCalss2"
            :throttle-time="0"
            @click="handleDispatchArrive(myRecommendation)"
          >
            确认到货
          </u-button>
          <u-button
            v-if="
              myRecommendation.dispatchStatus == '3' &&
              myRecommendation.nodeStatus == '7' &&
              myRecommendation.planType == '1'
            "
            :plain="true"
            :custom-style="btnCalss2"
            :throttle-time="0"
            @click="handlePhotoDispatchArrive(myRecommendation)"
          >
            到货磅单
          </u-button>
          <u-button
            v-if="
              myRecommendation.dispatchStatus == '4' &&
              myRecommendation.isEvaluate == 0
            "
            :plain="true"
            :custom-style="btnCalss3"
            :throttle-time="0"
            @click="handleDispatchEvaluate(myRecommendation)"
          >
            评价货主
          </u-button>
          <!-- <u-button
            v-if="
              myRecommendation.dispatchStatus == '3' &&
              myRecommendation.nodeStatus == '8'
            "
            :plain="true"
            :custom-style="btnCalss3"
            :throttle-time="0"
            @click="handledispatchSettle(myRecommendation)"
          >
            运费结算
          </u-button> -->
          <u-button
            :plain="true"
            :custom-style="btnCalss3"
            :throttle-time="0"
            @click="routeJumpBtn(myRecommendation)"
          >
            查看详情
          </u-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { imgUrl } from 'common/httpEnum'

export default {
  name: 'myRecommendation',
  props: {
    myRecommendation: {
      type: Object,
      default: () => {
        return {}
      },
    },
    grabbingTime: {
      type: Boolean,
      default: false,
    },
    dataSourcesType: {
      type: Number,
      default: '',
    },
    pageList: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      imgUrl,
      titleName: undefined,
      btnCalss1: {
        marginLeft: '20rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#fff',
        color: 'red',
        boxSizing: 'border-box',
      },
      btnCalss2: {
        marginLeft: '10rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#fff',
        color: '#387cf9',
        boxSizing: 'border-box',
      },
      btnCalss3: {
        marginLeft: '10rpx', // 注意驼峰命名，并且
        width: '128rpx',
        height: '49rpx',
        lineHeight: '49rpx',
        fontSize: '24rpx',
        background: '#4F87FE',
        color: 'white',
        boxSizing: 'border-box',
      },
      orderStatusList: [
        { type: 1, icon: '/static/ordertobeconfirmed.png' },
        { type: 2, icon: '/static/ordertransforming.png' },
        { type: 3, icon: '/static/ordertobepaid.png' },
        { type: 4, icon: '/static/orderfinish.png' },
        { type: 5, icon: '/static/ordercancel.png' },
      ],
      orderNodeStatusList: [
        { type: 1, icon: '/static/ordertobeconfirmed.png' },
        { type: 2, icon: '/static/ordertobeconfirmed-1.png' },
        { type: 3, icon: '/static/ordercancel2.png' },
        { type: 4, icon: '/static/ordertransforming-1.png' },
        { type: 5, icon: '/static/ordercancel1.png' },
        { type: 6, icon: '/static/ordertransforming-2.png' },
        { type: 7, icon: '/static/ordertransforming-3.png' },
        { type: 8, icon: '/static/orderpay1.png' },
        { type: 9, icon: '/static/orderpay2.png' },
        { type: 10, icon: '/static/orderfinish.png' },
        { type: 11, icon: '/static/orderpay4.png' },
        { type: 12, icon: '/static/ordercancel.png' },
      ],
    }
  },
  mounted() {
    this.titleName = this.myRecommendation.cargoName.length
  },
  methods: {
    //调用手机号
    handleClickcustomerService(val) {
      uni.makePhoneCall({
        // 手机号
        phoneNumber: val,
        // 成功回调
        success: (res) => {},
        // 失败回调
        fail: (res) => {},
      })
    },
    //取消接单
    handleDispatchCancelSend(val) {
      this.$emit('dispatchCancelSend', val)
    },
    // 确定接单
    handleDispatchSend(val) {
      this.$emit('dispatchSend', val)
    },
    // 确认装货
    handleDispatchLoad(val) {
      this.$emit('dispatchLoad', val)
    },
    // 到货确认
    handleDispatchArrive(val) {
      this.$emit('dispatchArrive', val)
    },
    // 到货磅单
    handlePhotoDispatchArrive(val) {
      this.$emit('dispatchPhotoArrive', val)
    },
    // 评价司机
    handleDispatchEvaluate(val) {
      this.$emit('dispatchEvaluate', val)
    },
    // 运费结算
    handledispatchSettle(val) {
      this.$emit('dispatchSettle', val)
    },
    //路由跳转
    routeJumpBtn(val) {
      this.$emit('routeJumpBtn', val)
    },
    //字符串截取
    stringInterception(val) {
      if (val?.length > 22) {
        return val.substring(0, 22) + '...'
      } else {
        return val
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.myRecommendation-box {
  background: white;
  border-radius: 10rpx;

  .myRecommendation-top-box {
    width: 100%;
    font-size: 32rpx;
    color: #4b4b4b;

    .transTotalPrice-big-box {
      padding-right: 16rpx;
      white-space: nowrap;
      font-size: 24rpx;

      .transTotalPrice-box {
        white-space: nowrap;
        color: #e02020;
        font-size: 40rpx;
      }
    }
  }

  .content {
    padding: 0 16rpx;
  }

  .item-name-style {
    padding-left: 16rpx;
    font-weight: bold;
    width: 472rpx;
    height: 80rpx;
    background: #ebf2fe;
    border-radius: 0px 0px 41px 0px;
  }

  .f-24 {
    font-size: 24rpx;
  }

  .myRecommendation-center-box {
    padding-bottom: 16rpx;

    .startingPoint-big-box {
      // background: #ebf2fe;
      border-radius: 10rpx;
      margin: 20rpx 0;
      padding: 22rpx 34rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      border-bottom: 1px splid #f2f2f2;
      align-items: center;
    }

    .address-icon {
      width: 163rpx;
      height: 13rpx;
    }

    .address-icon-lay {
      margin-left: -70rpx;
      margin-top: -20rpx;
      transform: rotate(45deg);
      width: 30rpx;
      height: 1rpx;
      border: 1rpx solid #f2f2f2;
    }

    .province-box {
      font-size: 36rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
    }

    .city-box {
      font-size: 24rpx;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .weight-box {
      display: flex;
      flex-wrap: wrap;
      font-size: 26rpx;
      color: #000;
      margin-bottom: 20rpx;
      padding-top: 20rpx;
      border-top: 1px solid #f2f2f2;
      width: 100%;
      .weight-left {
        width: 65%;
      }
      .weight-right {
        width: 35%;
      }
      .u-flex {
        line-height: 40rpx;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis;

        .weight-box-lable {
          white-space: nowrap;
          text-align: right;
          width: 120rpx;
        }

        .weight-box-content {
          color: black;
        }
        .text-color3399ff {
          color: #3399ff;
        }
        .text-colore02020 {
          color: #e02020;
        }
      }
      .u-certer {
        display: flex;
        justify-content: center;
      }
    }

    .itemName-box-base {
      position: relative;

      .itemName-box {
        display: flex;
        flex-wrap: wrap;
        font-size: 28rpx;
        margin-top: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 1px solid #f2f2f2;
      }

      .goods-icon {
        position: absolute;
        width: 115rpx;
        height: 115rpx;
        left: 550rpx;
        top: 10rpx;
      }

      .order-icon {
        position: absolute;
        width: 115rpx;
        height: 108rpx;
        left: 550rpx;
        top: -100rpx;
      }
    }

    .driver-icon {
      overflow: hidden;
      border-radius: 50%;
      background: rgb(158, 153, 153);
      width: 50rpx;
      height: 50rpx;
    }
  }

  .myRecommendation-bottom-box {
    position: relative;
    padding: 12rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f2f2f2;
    color: #949699;
    font-size: 24rpx;
    .myRecommendation-bottom-time-box {
      white-space: nowrap;
    }
  }
  .myRecommendation-bottom-btns {
    display: flex;
    justify-items: flex-end;
  }
  .container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .container .box {
    width: 12rpx;
    height: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container .box span {
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
    animation: animate 1s linear infinite;
    animation-delay: calc(1s * var(--i));
  }

  .container .box:nth-child(2) span {
    border: none;
    background: #3399ff;
  }

  @keyframes animate {
    0% {
      width: 0;
      height: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      width: 36rpx;
      height: 36rpx;
      opacity: 0;
    }
  }

  .finding-tip {
    margin-left: 20rpx;
    height: 50rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #949699;
    line-height: 50rpx;
  }

  .progress-bar {
    width: 50%;
    height: 15rpx;
    margin: 10rpx 10rpx 0 0;
    display: flex;
  }

  .tag {
    width: 66rpx;
    height: 32rpx;
    line-height: 32rpx;
    border-radius: 10%;
    color: white;
    text-align: center;
  }
}
</style>
